<style scoped>
</style>
<template>
	<div>

	 <Form ref="infoForm" :label-width="80" label-colon>
        <Row type="flex" justify="start" class="code-row-bg">
          <Col span="6">
            <FormItem label="原表名">
              <Input v-model="queryParams.batch" placeholder="请输入源库表名称" clearable />
            </FormItem>
          </Col>
          <!-- <Col span="6">
            <FormItem label="原表名">
              <Input v-model="queryParams.srctable" placeholder="请输入源库表名称" clearable />
            </FormItem>
          </Col> -->
          <Col span="6">
            <Button type="primary"  style="margin-left:30px;" @click="getEtlBatchList(1)" class="info_button">查询</Button>
            <Button type="info" style="margin-left:30px;" @click="addDb">添加批次</Button>
          </Col>
        </Row>
      </Form>


		<Table stripe border :height="this.windowHeight - 200" :columns="columns" :data="data" ref="tables" size="small"
		 :tooltip-theme="menuTheme" :loading="loading"></Table>
		<Page :total="totals" show-sizer :style="{padding:'15px'}" :page-size="sizes" @on-change="swichPage"
		 @on-page-size-change="swichSize" />
		<Modal v-model="modal" title="添加批次" :mask-closable="false">
			<Add v-if="modal" v-on:fun="change" :menuTheme="this.menuTheme" />
			<div slot="footer" :style="{color:'#808695',fontSize:'12px',textAlign:'center'}">温馨提示：不允许与已添加系统重名</div>
		</Modal>
		<Modal v-model="updateModal" title="修改批次" footer-hide :mask-closable="false">
			<Update v-if="updateModal" v-on:fun="updateChange" :selected="this.selected" :menuTheme="this.menuTheme" />
		</Modal>

	</div>
</template>
<script>
	import Add from "./add";
	import Update from "./update";

	export default {
		name: "List",
		components: {
			Add,
			Update,
		},
		props: {
			menuTheme: String,
			windowHeight: Number
		},
		data() {
			return {
				loading: true,
				columns: [{
						title: "序号",
						type: "index",
						width: 70,
						align: "center"
					},
					{
						title: "批次名称",
						key: "batchName",
						tooltip: true,
						width: 200
					},
					{
						title: "批次",
						key: "batch",
						align: "center",
						width: 80
					},
					{
						title: "源库名称",
						key: "sourceDbSysname",
						tooltip: true,
						width: 120
					},
					{
						title: "目标库名称",
						key: "targetDbSysname",
						tooltip: true,
						width: 120
					},
					{
						title: "定时任务类型",
						key: "taskType",
						width: 120,
						render: (h, params) => {
							if (params.row.taskType === 0) {
								return h(
									"Tag", {
										props: {
											color: "geekblue",
											type: "border"
										}
									},
									"Date"
								);
							} else if (params.row.taskType === 1) {
								return h(
									"Tag", {
										props: {
											color: "blue",
											type: "border"
										}
									},
									"Hours"
								);
							} else if (params.row.taskType === 2) {
								return h(
									"Tag", {
										props: {
											color: "cyan",
											type: "border"
										}
									},
									"Minutes"
								);
							} else {
								return h("span", "待设置");
							}
						}
					},
					{
						title: "定时任务间隔",
						key: "taskVal",
						tooltip: true,
						width: 120
					},
					{
						title: "抽取状态",
						key: "execFlag",
						align: "center",
						width: 110,
						render: (h, params) => {
							if (params.row.execflag === 0) {
								return h(
									"Tag", {
										props: {
											color: "primary",
											type: "border"
										}
									},
									"Waiting"
								);
							} else if (params.row.execflag === 1) {
								return h(
									"Tag", {
										props: {
											color: "warning",
											type: "border"
										}
									},
									"Running"
								);
							} else if (params.row.execflag === 2) {
								return h(
									"Tag", {
										props: {
											color: "error",
											type: "border"
										}
									},
									"Error"
								);
							} else {
								return h(
									"Tag", {
										props: {
											color: "success",
											type: "border"
										}
									},
									"Success"
								);
							}
						}
					},
					{
						title: "定时状态",
						key: "flag",
						align: "center",
						width: 90,
						render: (h, params) => {
							if (params.row.flag === 1) {
								return h(
									"Tag", {
										props: {
											color: "success",
											type: "border"
										}
									},
									"运行"
								);
							} else {
								return h(
									"Tag", {
										props: {
											color: "warning",
											type: "border"
										}
									},
									"已停"
								);
							}
						}
					},
					{
						title: "入库时间",
						key: "createTime",
						tooltip: true,
						width: 120,
					},
					{
						title: "修改时间",
						key: "updateTime",
						tooltip: true,
						width: 120,
					},
					{
						title: "创建人",
						key: "createAccount",
						tooltip: true,
						width: 120
					},
					{
						title: "修改人",
						key: "updateAccount",
						tooltip: true,
						width: 120
					},
					{
						title: "操作",
						width: 285,
						fixed: "right",
						render: (h, params) => {
							let executeButton =
								params.row.execFlag === 0 ?
								h(
									"Button", {
										props: {
											type: "success",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.exxcutes(params);
											}
										}
									},
									"执行"
								) :
								h(
									"Button", {
										props: {
											type: "success",
											size: "small",
											disabled: true
										},
										style: {
											marginRight: "5px"
										}
									},
									"执行"
								);

							let startButton =
								params.row.flag === 0 ?
								h(
									"Button", {
										props: {
											type: "primary",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.startBatch(params, 1);
											}
										}
									},
									"启动"
								) :
								h(
									"Button", {
										props: {
											type: "warning",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.startBatch(params, 0);
											}
										}
									},
									"停用"
								);


							return h("div", [
								executeButton,
								h(
									"Button", {
										props: {
											type: "info",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.updateFun(params);
											}
										}
									},
									"修改设置"
								),
								startButton,
				                h(
									"Button", {
										props: {
											type: "error",
											size: "small"
										},
										style: {
											marginRight: "5px"
										},
										on: {
											click: () => {
												this.remove(params);
											}
										}
									},
									"删除"
								),


							]);
						}
					}
				],
				queryParams:{
					batch:"",
				},
				data: [],
				modal: false,
				mountedBatch: "",
				sysName: "",
				sizes: 20,
				currentPage: 1,
				totals: 0,
				selected: "",
				updateModal: false,
				mountedModal: false
			};
		},
		methods: {
			//切换页码
			swichPage(page) {
				this.currentPage = page;
				this.getEtlBatchList(this.currentPage);
			},
			//切换每页容量
			swichSize(size) {
				this.sizes = size;
				this.getEtlBatchList(1);
			},
			//获取批次列表
			async getEtlBatchList(pages) {
				const data = {
					pages:pages,
					sizes:100
				};
				const result = await this.$api.getEtlBatchList(data);
				this.loading = false;
				if (result.code === 1) {
					this.data = result.data.list;
					this.totals = result.data.total;
				}
			},
			//打开添加页面
			addDb() {
				this.modal = true;
			},
			//add组件callback方法
			change() {
				this.getEtlBatchList(1);
				this.modal = false;
			},
			//打开添加页面
			updateFun(data) {
				this.selected = { ...data.row
				};
				this.updateModal = true;
			},
			//update组件callback方法
			updateChange() {
				this.getEtlBatchList(this.currentPage);
				this.updateModal = false;
			},
			//启动批次
			startBatch(params, val) {
				return new Promise(async resolve => {
					this.$Modal.confirm({
						title: "切换确认",
						content: "您确认要切换任务状态吗？",
						onOk: async () => {
							const query = {
								batch: params.row.batch,
								status: val
							};
							await this.$api.startBatch(query);
							this.$Notice.info({
								title: "任务切换提醒",
								render: h => {
									return h("span", {
										style: {
											lineHeight: "20px"
										}
									}, [
										"任务状态切换后，",
										h(
											"span", {
												style: {
													color: "red",
													fontWeight: "600"
												}
											},
											"次日生效，今日不生效"
										),
										"，请知晓！"
									]);
								},
								duration: 5
							});
							params.row.flag = val;
							resolve();
						}
					});
				});
			},
			//执行批次任务
			exxcutes(params) {
				return new Promise(async resolve => {
					this.$Modal.confirm({
						title: "任务执行",
						content: "您确认要执行任务吗？",
						onOk: async () => {
							const query = {
								batch: params.row.batch
							};
							await this.$api.executeAll(query);
							this.$Notice.info({
								title: "任务执行提醒",
								render: h => {
									return h("span", {
										style: {
											lineHeight: "20px"
										}
									}, [
										"任务触发执行后，将等待任务扫描器进行扫描执行，",
										h(
											"span", {
												style: {
													color: "red",
													fontWeight: "600"
												}
											},
											"不会立即执行"
										),
										"，请耐心等待！"
									]);
								},
								duration: 5
							});
							params.row.execflag = 1;
							resolve();
						}
					});
				});
			}, //打开挂载sql窗口
			mountSqlScript(e) {
				this.mountedBatch = e.row.batch;
				this.sysName = e.row.name;
				this.mountedModal = true;
			},
			closeMount() {
				this.mountedModal = false;
			},
			 //删除批次
			remove(data) {
				console.log(data.row);

				this.$Modal.confirm({
					title: "确认删除",
					content: `您确认要删除【${data.row.batchName}】批次？</br> 删除后将<span style="color: red;">无法恢复！</span>`,
					onOk: async () => {
						console.log(data);
						this.addLoading = true;
						const result = await this.$api.deleteEtlBusinessBatch({ batch: data.row.batch });

						console.log(result);

						if (result.code === 1) {
	
							this.$Message.success("删除成功!");
							this.getEtlBatchList(1);
							this.$emit("func");
						} else {
							this.$Message.error(result.errMsg);
						}
						this.addLoading = false;
					}
				});
			},
			

		},
		mounted() {
			this.getEtlBatchList(this.currentPage);
		}
	};
</script>
